<template>
	<!-- 投注 -->
	<view class="bets">
		
		<view class="header flex">
			<view class="status-bar"></view>
			<view class="title flex-c">
				<view class="flex">
					<uni-icons type="arrowleft" size="24" color="#fff"  @click="fnAddEvent(0)" ></uni-icons>
				</view>
				<view class="flex-c"  style="text-align: center;">
					<text class="pageTitle">投注列表</text>
				</view>
				<view class="flex">
				</view>
			</view>
		</view>
		
		<view class="header2">
			<view class="itemBox flex-c">
				<view class="item flex-c" @click="fnAddEvent(0)">
					<view class="flex-c">
						<uni-icons type="plusempty" size="16" color="#9698A9"></uni-icons>
						<text style="margin-left: 10rpx;">添加赛事</text>
					</view>
				</view>
				<view class="item flex-c" @click="fnAddEvent(1)">
					<view class="flex-c">
						<text>清空重选</text>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="holder">

		</view>
		<view class="main">
			<view class="listBox">
				<view class="listItem" v-for="(item,index) in match_list" :key="index">
					<view class="itemTop flex-c">
						<view class="close flex-c" @click="fnDeleteSingle(index,item.match_id)">
							<uni-icons type="closeempty" size="16" color="#fff"></uni-icons>
						</view>
						<view class="name flex-c">
							<view class="home_name">{{item.home_name}}</view>
							<view class="vs">VS</view>
							<view class="away_name">{{item.away_name}}</view>
						</view>
						<view class="none"></view>
					</view>
					<view class="itemBot flex-c">
						<view class="time flex-c">
							<text>{{item.match_code}}</text>
							<text>{{item.issue_num}}</text>
						</view>
						<view class="type flex-c ellipsis" @click="competitionSituation()">
							<view class="pass" v-for="(item1,index1) in item.bet_name">{{item1}}</view>
						</view>
						<view class="text flex-c">
							<text>胆</text>
						</view>
					</view>
				</view>
			</view>
			<view class="upload flex-c" @click="fnIsUploadImg()">
				<image src="../../static/bets/choose.png" mode="" v-if="isUploadImg"></image>
				<image src="../../static/bets/not-choose.png" mode="" v-else></image>
				<text>要求店主上传照片</text>
			</view>
		</view>
		<view class="" style="height: 860rpx;">

		</view>
		<view class="footer">
			<view class="f-top flex-c">
				<view class="pass_method flex-c" @click="fnShowAll()">
					<text class="ellipsis">{{pass_method}}</text>
					<view class="arrow"></view>
				</view>
				<view class="multiple flex-c">
					倍<view class="flex-c">
						<text @click="fnChangeMultiple(0)">-</text>
						<input type="number" v-model="number" @blur="handleInput()">
						<text @click="fnChangeMultiple(1)">+</text>
					</view>数
				</view>
				<view class="optimization flex-c">
					<text>奖金优化></text>
				</view>
			</view>
			<view class="f-mid" v-if="showPass">
				<view class="passType" v-if="freedom_pass_method.length">
					<text>自由过关</text>
					<view class="passBox flex">
						<view class="item" :class="item.status?'active':''" @click="fnChangeFreedom(item,1)" v-for="(item,index) in freedom_pass_method">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="passType" v-if="more_pass_method.length">
					<text>多串过关</text>
					<view class="passBox flex">
						<view class="item" :class="item.status?'active':''" @click="fnChooseMore(index,item,2)" v-for="(item,index) in more_pass_method">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="f-bot">
				<view class="reword flex-col-ac">
					<view class="flex-c">
						<text>{{total_note}} 注 </text><text style="color: #F22F29;margin: 0 10rpx;">{{total_price}}</text>元 预计奖金：<text
						 style="color: #F22F29;">{{min_price}}~{{max_price}}</text>元
					</view>
					<text style="font-size: 20rpx;color: #999;">预计奖金仅供参考，请以实票为准</text>
				</view>
				<view class="btns flex-c">
					<view class="docuBtn flex-c">
						<image src="../../static/bets/release.png"></image>
						<text>发布跟单</text>
					</view>
					<view class="coopBtn flex-c">
						<image src="../../static/bets/chipped.png"></image>
						<text>发布合买</text>
					</view>
					<view class="comBtn flex-c" @click="open">
						<text>确认投注</text>
					</view>
				</view>
			</view>
			<uni-popup ref="popupPayment" type="bottom">
				<view class="payBox">
					<view class="payHead">
						<view class="payTitle flex-c">
							<uni-icons type="closeempty" size="24" color="#666" class="icon" @click="close"></uni-icons>
							<text>支付</text>
						</view>
						<view class="payType flex-bc">
							<text>{{bet_name}}:</text>
							<text class="red">{{total_price}}元</text>
						</view>
					</view>
					<view class="payMain">
						<view class="redbag flex-bc">
							<text>红包抵扣:</text>
							<text class="gray">暂无红包</text>
						</view>
						<view class="balance flex-bc">
							<text>余额抵扣:</text>
							<text class="red">{{total_price}}元</text>
						</view>
						<view class="confirm">
							<view class="comPayBtn flex-c" @click="fnCreateBet()">
								<text>确认支付</text>
							</view>
							<view class="flex-c agreement">
								<image src="../../static/bets/choose.png" v-if="isAgreement" @click="isAgreement = !isAgreement"></image>
								<image src="../../static/bets/not-choose.png" v-else @click="isAgreement = !isAgreement"></image>
								<text class="red">我已年满18岁，</text>已阅读并同意<text class="red" @click="fnToStatement()">《用户协议及法律声明》</text>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view class="modal flex-c" v-if="showMore">
			<moreMatch @fnShowMore="fnShowMore" :moreData="moreData" :match_data="match_data" @fnGetMatchData="fnGetMatchData"></moreMatch>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import moreMatch from '@/pages/components/moreMatch.vue'
	export default {
		components: {
			uniPopup,
			moreMatch
		},
		data() {
			return {
				showMore: false,
				token: uni.getStorageSync('token'),
				number: 10,
				showPass: false,
				match_list: [],
				freedom_pass_method: [],
				more_pass_method: [],
				pass_method: '请选择',
				method_type: 1,
				isUploadImg: true,
				strand_ids: [],
				strand_text: [],
				strand_id: '',
				guts: '',
				match_data: [],
				total_note: '0',
				total_price: '0',
				max_price: '0',
				min_price: '0',
				thumb_status: 1, //默认上传照片
				isAgreement: true,
				bet_name: '',
				bet_type: ''
			};
		},
		onLoad(option) { //页面传参
			this.bet_type = option.bet_type
			this.fnGetData(option.data)
		},
		methods: {
			competitionSituation() {
				this.showMore = !this.showMore
			},
			// 删除单个
			fnDeleteSingle(idx, match_id) {
				this.match_list.splice(idx, 1)
				uni.$emit('deleteSingle', match_id)
			},
			fnIsUploadImg() {
				if (this.isUploadImg) {
					this.thumb_status = 0
				} else {
					this.thumb_status = 1
				}
				this.isUploadImg = !this.isUploadImg
			},
			fnAddEvent(type) { //添加赛事 清空重选
				if (type) {
					uni.redirectTo({
						url: `../caipiaoDetail/caipiaoDetail?type_id=${this.bet_type}`
					})
				} else {
					uni.$off('deleteSingle');
					uni.navigateBack()
				}
			},
			fnGetData(data) {
				console.log(data)
				this.match_data = JSON.parse(data).match_data
				console.log(this.match_data)
				uni.showToast({
					title: '加载中',
					icon: 'loading'
				})
				this.request({
					url: '/czb/football_bet/BetList',
					method: 'POST',
					data: data
				}).then((ret) => {
					console.log(ret);
					if (ret.code == 0) {
						this.match_list = ret.data.match_list
						this.freedom_pass_method = ret.data.freedom_pass_method
						for (var i = 0; i < this.freedom_pass_method.length; i++) {
							this.$set(this.freedom_pass_method[i], 'status', false)
						}
						this.$set(this.freedom_pass_method[this.freedom_pass_method.length - 1], 'status', true)
						this.strand_ids = [this.freedom_pass_method[this.freedom_pass_method.length - 1].strand_id]
						this.strand_id = this.strand_ids.join(',')
						// console.log(this.freedom_pass_method)
						// console.log(this.strand_id)
						this.more_pass_method = ret.data.more_pass_method
						for (var i = 0; i < this.more_pass_method.length; i++) {
							this.$set(this.more_pass_method[i], 'status', false)
						}
						this.strand_text.push(this.freedom_pass_method[this.freedom_pass_method.length - 1].name)
						this.pass_method = this.strand_text.join(',')
						// console.log(this.more_pass_method)
						this.fnGetBetPrice()
						uni.hideToast()
					}
				})
			},
			//是否展示全部
			fnShowAll() {
				if (!this.showPass) {
					this.pass_method = '收起'
				} else {
					this.pass_method = this.strand_text.join(',') || '请选择'
				}
				this.showPass = !this.showPass
			},
			// 改变倍数
			fnChangeMultiple(type) {
				if (type) { //加
					this.number++
				} else {
					if (this.number <= 1) return
					this.number--
				}
				this.fnGetBetPrice()
			},
			handleInput() {
				if (this.number <= 0 || '') {
					this.number = 1
				}
				this.fnGetBetPrice()
			},

			fnChangeFreedom(item, type) {
				this.strand_text = []
				this.strand_ids = []
				// 去掉多串数据
				for (var i = 0; i < this.more_pass_method.length; i++) {
					this.more_pass_method[i].status = false
				}
				item.status = !item.status
				for (var i = 0; i < this.freedom_pass_method.length; i++) {
					console.log(this.freedom_pass_method[i].status)
					if (this.freedom_pass_method[i].status) {
						this.strand_ids.push(this.freedom_pass_method[i].strand_id)
						this.strand_text.push(this.freedom_pass_method[i].name)
					}
				}
				this.strand_id = this.strand_ids.join(',')
				this.pass_method = this.strand_text.join(',')
				console.log(this.strand_id)
				if (this.strand_id == '') {
					this.pass_method = '请选择'
				}
				this.method_type = type


				console.log(this.method_type)
				this.fnGetBetPrice()

			},
			fnChooseMore(idx, item, type) {
				this.strand_ids = []
				this.strand_text = []
				// 去掉自由数据
				for (var i = 0; i < this.freedom_pass_method.length; i++) {
					this.freedom_pass_method[i].status = false
				}
				// console.log(this.method_type)
				if (this.more_pass_method[idx].status) return
				for (var i = 0; i < this.more_pass_method.length; i++) {
					this.more_pass_method[i].status = false
				}
				this.more_pass_method[idx].status = !this.more_pass_method[idx].status
				for (var i = 0; i < this.more_pass_method.length; i++) {
					// console.log(this.more_pass_method[i].status)
					if (this.more_pass_method[i].status) {
						this.strand_ids.push(this.more_pass_method[i].strand_id)
						this.strand_text.push(this.more_pass_method[i].name)
					}
				}
				this.strand_id = this.strand_ids.join(',')
				this.pass_method = this.strand_text.join(',')
				console.log(this.strand_id)
				if (this.strand_id == '') {
					this.pass_method = '请选择'
				}
				this.method_type = type

				console.log(this.method_type)
				this.fnGetBetPrice()
			},
			fnGetBetPrice() {
				console.log(this.method_type)
				if (this.strand_id == '') return
				var data = {
					'store_id': 1,
					'token': this.token,
					'method_type': this.method_type,
					'multiple': this.number,
					'strand_id': this.strand_id,
					'guts': this.guts,
					'match_data': this.match_data
				}
				console.log(data)
				this.request({
					url: '/czb/football_bet/getBetPrice',
					method: 'POST',
					data: data,
				}).then((ret) => {
					console.log(ret);
					if (ret.code == 0) {
						var data = ret.data
						this.total_note = data.total_note
						this.total_price = data.total_price
						this.max_price = data.max_price
						this.min_price = data.min_price
						this.bet_name = data.bet_name
					}
				})
			},
			open() {
				// console.log(this.freedom_pass_method)
				// console.log(this.more_pass_method)
				if (this.findElem(this.freedom_pass_method, 'status', true) == -1 && this.findElem(this.more_pass_method, 'status',
						true) == -1) {
					uni.showToast({
						title: '请选择玩法',
						icon: 'none'
					})
					return
				}
				this.$refs.popupPayment.open()
			},
			close() {
				this.$refs.popupPayment.close()
			},
			findElem(arrayToSearch, attr, val) {
				for (var i = 0; i < arrayToSearch.length; i++) {
					if (arrayToSearch[i][attr] == val) {
						return i;
					}
				}
				return -1;
			},
			fnCreateBet() {
				console.log(this.thumb_status)
				if (!this.isAgreement) return uni.showToast({
					title: '请先勾选协议',
					icon: 'none'
				})
				var data = {
					'store_id': 1,
					'token': this.token,
					'method_type': this.method_type,
					'multiple': this.number,
					'strand_id': this.strand_id,
					'guts': this.guts,
					'match_data': this.match_data,
					'thumb_status': this.thumb_status,
					'bet_type': this.bet_type
				}
				console.log(data)
				this.request({
					url: '/czb/football_bet/userCreateBet',
					method: 'POST',
					data: data,
				}).then((ret) => {
					console.log(ret);
					if (ret.code == 0) {
						var data = ret.data
						uni.navigateTo({
							url: `/pages/bets/betsResult?order_id=${data.order_id}&type_id=${this.bet_type}`
						})
					} else {
						uni.showToast({
							title: ret.message,
							icon: 'none'
						})
					}
				})
			},
			fnToStatement() {
				uni.navigateTo({
					url: '/pages/packageA/statement/statement'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.header {
		width: 100%;
		/*  #ifdef  H5  */
		height: 88rpx;
		/*  #endif  */
		/*  #ifdef  APP-PLUS  */
		height: 150rpx;
		/*  #endif  */
		background: #F22F29;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		align-items: center;
	
		.status-bar {
			height: var(--status-bar-height);
		}
	
		.title {
			width: 100%;
			font-size: 32rpx;
			color: #fff;
			height: 100%;
			padding-top: var(--status-bar-height);
			box-sizing: border-box;
	
			view {
				flex: 1;
				padding: 0 10rpx;
				height: 100%;
				box-sizing: border-box;
				align-items: center;
	
				.pageTitle {
					flex: 1;
					white-space: nowrap;
				}
			}
	
			.doubleColor {
				flex-direction: column;
				font-size: 32rpx;
	
				.smallTitle {
					font-size: 24rpx;
				}
			}
	
			.share {
				justify-content: flex-end;
	
				image {
					width: 50rpx;
					height: 50rpx;
					display: block;
					margin-right: 20rpx;
				}
	
				.select {
					padding: 20rpx;
				}
			}
		}
	}
	
	
	.modal {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .3);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
	}


	.payBox {
		background: #F7F8FC;
		border-radius: 20rpx 20rpx 0 0;
		font-size: 30rpx;

		.payHead {
			.payTitle {
				padding: 0 20rpx;
				position: relative;
				height: 88rpx;
				margin-bottom: 2rpx;
				background: #fff;
				border-radius: 20rpx 20rpx 0 0;

				.icon {
					position: absolute;
					left: 20rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.payType {
				background: #fff;
				padding: 0 20rpx;
				height: 88rpx;
				margin-bottom: 20rpx;
			}
		}

		.payMain {
			padding: 0 20rpx;
			background: #fff;
			padding-bottom: 20rpx;

			.confirm {
				.agreement {
					font-size: 24rpx;

					image {
						width: 26rpx;
						height: 26rpx;
						padding: 10rpx;
					}
				}

				.comPayBtn {
					margin: 20rpx 0;
					height: 100rpx;
					background: #F22F29;
					border-radius: 10rpx;
					color: #fff;
				}
			}

			.redbag,
			.balance {
				height: 88rpx;
			}

			.redbag {
				border-bottom: 1rpx solid #F7F8FC;

				.gray {
					color: #666;
				}
			}
		}

		.red {
			color: #F22F29;
		}
	}

	.holder {
		/*  #ifdef  H5  */
		height: 196rpx;
		/*  #endif  */
		/*  #ifdef  APP-PLUS  */
		height: 258rpx;
		/*  #endif  */
	}

	.bets {
		height: 100%;
	}

	.head_top {
		width: 100%;
		/*  #ifdef  H5  */
		height: 88rpx;
		/*  #endif  */
		/*  #ifdef  APP-PLUS  */
		height: 150rpx;
		/*  #endif  */
		background: #F22F29;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		text-align: center;
		align-items: center;

		/* 垂直居中 */

		.status-bar {
			height: var(--status-bar-height);
		}

		.theme {
			margin-right: 48rpx;
			font-size: 32rpx;
			color: #fff;
			flex: 1;
			text-align: center;
		}

	}

	.header2 {

		width: 100%;
		position: fixed;
		/*  #ifdef  H5  */
		top: 88rpx;
		/*  #endif */
		/*  #ifdef  APP-PLUS  */
		top: 150rpx;
		/*  #endif */
		left: 0;
		height: 108rpx;
		background: #F6F6F6;

		.itemBox {
			height: 88rpx;
			background: #fff;
			font-size: 28rpx;
			color: #666;

			.item {
				flex: 1;
				height: 100%;

				view {
					width: 60%;
					height: 70%;
					border-radius: 10rpx;
					border: 1rpx solid #999;
				}

			}

			.item:nth-child(1) {
				border-right: 1rpx solid #E3E3E3;
			}
		}
	}

	.main {
		height: calc(100% - 376rpx);
		width: 100%;
		background: #F6F6F6;

		.listBox {
			padding: 0 20rpx;

			.listItem {
				height: 170rpx;
				background: #fff;
				border-bottom: 1rpx solid #E3E3E3;
				box-sizing: border-box;
				padding: 10rpx 0;

				view {
					height: 50%;
				}

				.itemTop {
					.close {
						width: 40rpx;
						height: 40rpx;
						background: #FFE5E7;
						border-radius: 50%;
						margin: 0 20rpx;
					}

					.name {
						flex: 1;
						height: 100%;

						view {
							text-align: center;
							font-size: 30rpx;
						}

						.home_name,
						.away_name {
							flex: 3;
						}

						.vs {
							flex: 1;
							color: #666;
						}
					}

					.none {
						width: 40rpx;
						height: 40rpx;
						margin: 0 20rpx;
					}
				}

				.itemBot {
					font-size: 24rpx;

					view {
						height: 100%;
					}

					.time {
						flex-direction: column;
						width: 100rpx;
					}

					.text {
						width: 80rpx;
						color: #FFE5E7;

						text {
							padding: 8rpx 10rpx;
							border: 1rpx solid #FFE5E7;
						}

					}

					.type {
						background: #eee;
						color: #F22F29;
						width: 530rpx;

						.pass {
							margin: 0 10rpx;
							line-height: 74.5rpx;
							white-space: nowrap;
							display: inline-block;
						}
					}
				}
			}
		}

		.upload {
			font-size: 28rpx;
			margin-top: 30rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;

		.f-top {
			height: 80rpx;
			width: 100%;
			border-top: 1rpx solid #E3E3E3;
			border-bottom: 1rpx solid #E3E3E3;
			box-sizing: border-box;
			font-size: 26rpx;

			.pass_method,
			.optimization {
				flex: 2;
				height: 100%;
			}

			.pass_method {
				padding: 0 10rpx;
			}

			.multiple {
				flex: 3;
				border-right: 1rpx solid #E3E3E3;
				border-left: 1rpx solid #E3E3E3;
				height: 100%;

				view {
					width: 60%;
					height: 46rpx;
					border-radius: 10rpx;
					border: 1rpx solid #E3E3E3;
					margin: 0 10rpx;

					text {
						color: #999;
						flex: 2.5;
						text-align: center;
						line-height: 46rpx;
						font-size: 28rpx;
					}

					input {
						border-right: 1rpx solid #E3E3E3;
						border-left: 1rpx solid #E3E3E3;
						flex: 3;
						font-size: 26rpx;
						padding: 0 10rpx;
						box-sizing: border-box;
						height: 100%;
						text-align: center;
					}
				}
			}

			.arrow {
				border-color: #9698A9 #fff #fff #fff;
				border-style: solid;
				border-width: 14rpx 14rpx 0 14rpx;
				height: 0;
				width: 0;
				margin-left: 10rpx;
			}
		}

		.f-mid {
			max-height: 320rpx;
			overflow-y: scroll;

			.passType {
				border-bottom: 1rpx solid #E3E3E3;
				padding: 20rpx;
				font-size: 26rpx;

				.passBox {
					flex-wrap: wrap;

					.item {
						width: 23%;
						text-align: center;
						height: 50rpx;
						line-height: 50rpx;
						margin-top: 20rpx;
						border: 1rpx solid #666;
						box-sizing: border-box;
						color: #666;
						margin-right: 2.5%;
					}

					.item:nth-child(4n) {
						margin-right: 0;
					}

					.active {
						color: #fff;
						background: #F22F29;
						border: none;
					}
				}
			}
		}

		.f-bot {
			width: 100%;

			.reword {
				font-size: 26rpx;
				border-top: 1rpx solid #E3E3E3;
				padding: 10rpx 0;
				height: 88rpx;
				box-sizing: border-box;
			}

			.btns {
				width: 100%;
				height: 100rpx;
				border-top: 1rpx solid #E3E3E3;
				box-sizing: border-box;

				view {
					flex: 1;
					height: 100%;
					font-size: 28rpx;
					color: #F22F29;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}

				.comBtn {
					color: #fff;
					background: #F22F29;
				}

				view:nth-child(1) {
					border-right: 1rpx solid #E3E3E3;
				}
			}
		}
	}
</style>
